<template>
  <!--<div class="main device-left-container">
    <header class="header-container">
      <div class="title">
        <span>电力设备监控</span>
      </div>
    </header>
    <div class="chart-box">
      <div class="chart" :style="'height:' + rowHeight* 4 + 'px'">
        <Statistic></Statistic>
      </div>
      <div class="chart" :style="'height:' + rowHeight* 4 + 'px'">
        <Left2></Left2>
      </div>
      <div class="chart" :style="'height:' + rowHeight* 4 + 'px'">
        <Left3></Left3>
      </div>
    </div>
  </div>-->
  <div class="container">
    <div class="row part">
      <div class="x-col-9 menu-charge">
        <div class="menu-charge-top">
          <div class="menu-charge-top-div">
            <div class="x-col-3">
              <p>今日</p>
            </div>
            <div class="x-col-7">
              <!--<p class="menu-charge-number">136</p>-->
              <p class="menu-charge-number">{{nowDay[1]}}</p>
              <p>入场</p>
            </div>
            <div class="x-col-7">
              <!--<p class="menu-charge-number">304</p>-->
              <p class="menu-charge-number">{{nowDay[2]}}</p>
              <p>出场</p>
            </div>
            <div class="x-col-7">
              <!--<p class="menu-charge-number">519<span class="menu-charge-number-primary">元</span></p>-->
              <p class="menu-charge-number">{{nowDay[0]/100}}<span class="menu-charge-number-primary">元</span></p>
              <p>收费</p>
            </div>
          </div>
        </div>   
        <div class="menu-charge-bottom">
          <div class="menu-charge-bottom-div">
            <div class="x-col-3">
              <p>昨日</p>
            </div>
            <div class="x-col-7">
              <!--<p class="menu-charge-number">582</p>-->
              <p class="menu-charge-number">{{yesterday[9]}}</p>
              <p>入场</p>
            </div>
            <div class="x-col-7">
              <!--<p class="menu-charge-number">710</p>-->
              <p class="menu-charge-number">{{yesterday[10]}}</p>
              <p>出场</p>
            </div>
            <div class="x-col-7">
              <!--<p class="menu-charge-number">1038<span class="menu-charge-number-primary">元</span></p>-->
              <p class="menu-charge-number">{{yesterday[8]/100}}<span class="menu-charge-number-primary">元</span></p>
              <p>收费</p>
            </div>
          </div>
        </div>
      </div>
      <div class="x-col-15 menu-car-number">
        <div class="row">
          <div class="menu-car-number-title"><i class="menu-car-number-title-icon"></i><span>昨日车辆统计</span></div>
          <div class="menu-car-number-main">
            <div class="x-col-8">
              <div class="menu-car-number-chart">
                <car-number-chart :options="carOptionsOne"></car-number-chart>
                <p class="menu-car-type-name">收费方式</p>
              </div>
            </div>
            <div class="x-col-8">
              <div class="menu-car-number-chart">
                <car-number-chart :options="carOptionsTwo"></car-number-chart>
                <p class="menu-car-type-name">离场方式</p>
              </div>
            </div>
            <div class="x-col-8">
              <div class="menu-car-number-chart">
                <car-number-chart :options="carOptionsThress"></car-number-chart>
                <p class="menu-car-type-name">用户类型</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row part">
      <div class="x-col-9 menu-payment">
        <div class="menu-payment-title">昨日支付方式统计</div>
        <div class="row">
          <div class="x-col-24 menu-payment-chart">
            <paymentChart :options="options"></paymentChart>
          </div>
        </div>
      </div>
      <div class="x-col-15 menu-trend">
        <div class="row">
          <div class="menu-trend-chart">
            <column></column>
          </div>
        </div>
      </div>
    </div>
    <div class="row part">
      <div class="x-col-24 menu-statistics">
        <div class="row">
          <div class="menu-statistics-chart">
            <line-chart></line-chart>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import Statistic from './Statistic'
import Left2 from './Left2'
import Left3 from './Left3'
import carNumberChart from './carNumberChart'
import column from './column'
import lineChart from './lineChart'
import paymentChart from './paymentChart'

export default {
  name: 'DeviceLeft',

  components: {
    Statistic,
    Left2,
    Left3,
    carNumberChart,
    column,
    lineChart,
    paymentChart
  },

  data () {
    return {}
  },

  computed: {
    options () {
      return {
        legend: {
          orient: 'vertical',
          right: 0,
          top: '20%',
          data: ['ETC', '在线支付', '现金', '预付费'],
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '支付类型',
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            data: [
                {value: this.$store.getters.yesterdayData[3].payment / 100, name: 'ETC'},
                {value: this.$store.getters.yesterdayData[4].payment / 100, name: '在线支付'},
                {value: this.$store.getters.yesterdayData[2].payment / 100, name: '现金'},
                {value: this.$store.getters.yesterdayData[5].payment / 100, name: '预付费'}
                // {value: 200, name: 'ETC'},
                // {value: 391, name: '在线支付'},
                // {value: 300, name: '现金'},
                // {value: 112, name: '预付费'}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        color: ['#c33a31', '#5f9fa8', '#d58364', '#91c7ae']
      }
    },
    carOptionsOne () {
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          position: 'inside'
        },
        series: [
          {
            name: '收费方式',
            type: 'pie',
            radius: '55%',
            center: ['50%', '40%'],
            labelLine: {
              normal: {
                length: 0
              }
            },
            data: [
              {value: this.$store.getters.yesterdayData[4].number + this.$store.getters.yesterdayData[3].number + this.$store.getters.yesterdayData[5].number, name: '在线支付'},
              {value: this.$store.getters.yesterdayData[2].number, name: '现金'}
              // {value: 391, name: '在线支付'},
              // {value: 300, name: '现金'}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        color: ['#c33a31', '#5f9fa8', '#d58364', '#91c7ae']
      }
    },
    carOptionsTwo () {
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          position: 'inside'
        },
        series: [
          {
            name: '离场方式',
            type: 'pie',
            radius: '55%',
            center: ['50%', '40%'],
            labelLine: {
              normal: {
                length: 0
              }
            },
            data: [
              // {value: 391, name: '自动'},
              // {value: 200, name: '人工'}
              {value: this.$store.getters.yesterdayData[1], name: '自动'},
              {value: this.$store.getters.yesterdayData[0], name: '人工'}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        color: ['#c33a31', '#5f9fa8', '#d58364']
      }
    },
    carOptionsThress () {
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          position: 'inside'
        },
        series: [
          {
            name: '用户类型',
            type: 'pie',
            radius: '55%',
            center: ['50%', '40%'],
            labelLine: {
              normal: {
                length: 0
              }
            },
            data: [
              // {value: 200, name: '固定'},
              // {value: 380, name: '临时'}
              {value: this.$store.getters.yesterdayData[7], name: '月保'},
              {value: this.$store.getters.yesterdayData[6], name: '临停'}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        color: ['#c33a31', '#5f9fa8', '#d58364']
      }
    },
    // 昨天数据
    yesterday () {
      return this.$store.getters.yesterdayData
    },
    // 今天数据
    nowDay () {
      return this.$store.getters.nowDay
    }
  },

  mounted () {
  },

  methods: {
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../assets/stylus/base'
.container
  height 100%
  .part
    height 33%
    padding-bottom: 16px;
    box-sizing: border-box;
  .x-col-9
    font-size 16px
  .x-col-15
    font-size 16px
  .menu-charge
    color #99A1A8
    height 100%
    background #1e1e1e
    .menu-charge-top
      overflow hidden
      box-sizing border-box
      height 50%
      padding 23px 30px 0px 15px
      .menu-charge-top-div
        text-align center
        display flex
        justify-content center
        align-items center
        height 99%
        border-bottom 1px dashed #666666
    .menu-charge-bottom
      overflow hidden
      box-sizing border-box
      height 50%
      padding 23px 30px 0px 15px
      .menu-charge-bottom-div
        height 99%
        display flex
        justify-content center
        align-items center
        text-align center
    .x-col-7,.x-col-3
      p
        font-size 12px
        font-weight 200
        margin 0
      .menu-charge-number
        color #fff
        line-height 30px
        font-size 30px
        .menu-charge-number-primary
          line-height 15px
          font-size 15px
  .menu-car-number
    color #99A1A8
    height 100%
    font-size 12px
    box-sizing border-box
    padding 0px 16px
    .row
      box-sizing border-box
      padding-top 50px
      height 100%
      background #1e1e1e
      .menu-car-number-title
        font-size 12px
        height 50px
        line-height 50px
        padding 0 0 0 26px
        position absolute
        top 0px
        .menu-car-number-title-icon {
          width: 6px;
          height: 19px;
          background: #999999;
		      margin-bottom: -5px;
          display: inline-block;
        }
        span{
          margin-left: 10px;
        }
      .menu-car-number-main
        height 100%
        .x-col-8
          height 100%
          .menu-car-number-chart
            height 100%
            text-align center
          .menu-car-type-name
            position absolute
            bottom 10px
            left 42%
            height 30px
            line-height 30px
            margin 0
  .menu-payment
    height 100%
    color #99A1A8
    background #1e1e1e
    box-sizing border-box
    position relative
    .menu-payment-title
      padding-left 0 0 0 26px
      height 30px
      line-height 30px
      position absolute
      top 0px
    .row
      height 100%
      .menu-payment-chart
        height 100%
  .menu-trend
    height 100%
    color #99A1A8
    box-sizing border-box
    padding 0px 16px
    .row
      height 100%
      background #1e1e1e
      .menu-trend-chart
        height 100%
  .menu-statistics
    height 100%
    color #99A1A8
    box-sizing border-box
    padding 0px 16px 0 0
    .row
      box-sizing border-box
      height 100%
      background #1e1e1e
      .menu-statistics-title
        padding-left 0 0 0 26px
        height 30px
        line-height 30px
        position absolute
        top 0px
      .menu-statistics-chart
        height 100%
@media screen and (max-width: 1520px) {
  .menu-charge-number {
    line-height: 20px!important;
    font-size: 20px!important;
  }
}
@media screen and (max-width: 1190px) {
  .menu-charge-number {
    line-height: 16px!important;
    font-size: 16px!important;
  }
}
</style>
